﻿import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import './info.scss'
import Hearder from '../index/hearder'

export default class Index extends Component {  
  constructor(props) {   
    super(props);
    this.state = { 
        hasNextPage:false,   
        pageNumber:1, 
        qid:Taro.getStorageSync('dateinfo').qid,//群ID
        content:{},//群管理，群简介，群公告
        result:[],//群成员
        qun_date:{},
        navindex:3,
        content1:[],
        snqnzanwu:'',
        isadd:0
    }
  }
  config = {
    navigationBarTitleText: '加载中'
  }

  open(url,type){
    this.$preload({
      type:type
    })
    CommonJs.open(url);
  }

  getquninfo(){
    var _this=this;
    var date1={id:this.state.qid}
    CommonJs.ajaxRequest('/cluster/getEntityAndLoginId',date1,'GET',function(res){
      _this.setState({
        qun_date: res.content
      })
    })
  }
  componentWillMount () {
    this.getquninfo()
    this.getcofcinfo()
    this.getdata(1)
    this.getproxyList()
    this.isadd()
  }
  getdata(index){
    //请求群成员
    var _this=this;
    var date = {
        pageNumber:index,
        clusterId:_this.state.qid,
        sortColumns:'degree_id,create_at desc'
    }
    CommonJs.ajaxRequest('/clusteruser/getClusterUserTwenty',date,'GET',function(res){
        for(var i = 0;i < res.result.length;i++){
            _this.state.result.push(res.result[i]);
        }   
        _this.setState({
          hasNextPage: res.hasNextPage,
          pageNumber: res.pageNumber
        });
    })
  }
  isadd(){
  	var dateinfo=Taro.getStorageSync('dateinfo') 
  	var _this=this;
  	var url='/clusteruser/getAllOfClusterUser?userId='+dateinfo.userid+'&clusterId='+this.state.qid
  	 CommonJs.ajaxRequest(url,'','GET',function(res){
  	 		if(res.content&&res.content.length>0){
  	 			var is=1;
  	 		}
  	 		else{
  	 			var is=0
  	 		}
        _this.setState({
          isadd:is
        });
        
    })
  }
  getcofcinfo(){
    //请求群管理，群简介，群公告
    var _this=this;
    var date = {
        id:_this.state.qid
    }
    CommonJs.ajaxRequest('/cluster/getEntityAndLoginId',date,'GET',function(res){
        _this.setState({
          content: res.content
        });
        Taro.setNavigationBarTitle({title:res.content.name+"群资料"})
    })
  }
  getproxyList(){
    var _this=this;
    var date = {
      clusterId:_this.state.qid
    }
    CommonJs.ajaxRequest('/cluster/getproxyList',date,'GET',function(res){
      _this.setState({
        content1: res.content,
        snqnzanwu: '暂无数据'
      })
    })
  }
  onShareAppMessage(res){
    let title = '"'+this.state.qun_date.name+'社群"，点击进入，和我一起参加活动吧'
    let path = '/pages/activity/activity?scene='+this.state.qun_date.id
    let imageUrl = this.state.qun_date.photo
    return CommonJs.onShareAppMessage(title, path, imageUrl)
  }

  opendetails(url,id){
    this.$preload('pagename',id);
    CommonJs.openTo(url);
  }
  tq(){
  	var _this=this;
  	Taro.showModal({
		  title: '提示',
		  content: '确定退出该圈子吗',
		  success: function (res) {
		    if (res.confirm) {
		      var url='/clusteruser/clusterUserRemove?clusterId='+_this.state.qid
		      CommonJs.ajaxRequest(url,'','GET',function(res){
			       Taro.showToast({
				      title:'操作成功，跳转中',
				      icon: 'none',
				      duration: 2000
				    })
			       setTimeout(function(){
			       		 CommonJs.open('/pages/xijia/gxq');
			       },1000)
			    })
		    } else if (res.cancel) {
		     
		    }
		  }
		})
  	
  }
  add(){
    var dateinfo=Taro.getStorageSync('dateinfo')
  	var date1={
      clusterId:dateinfo.qid
    }
    Taro.showToast({
      title:'加群中',
      icon: 'none',
      duration: 1000
    })
    CommonJs.ajaxRequest('/openClusterBindingUser/create',date1,'GET',function(res){})
  }
  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    const list_date = this.state.qun_date
    const content1 = this.state.content1
    return (
      <View className='page'>
        <View className='qun-bgbanner'>
          <Hearder propItem={list_date} porpNav={this.state.navindex} onHandOpen={this.open.bind(this)}></Hearder>
        </View>
        <View>
            <View className='qun-zbg'>
                <View className='qun-moduone'>
                    <View className='qun-cytite'>
                        <Text className='qun-cy'>成员</Text>
                    </View>
                    <View className='qun-cyinfo'>

                        {this.state.result.map((item, index) => ( 
                        <View className='qun-li'>
                            <Image className='qun-avatar' src={item.photo ? item.photo : 'https://minichat.g2ma.com/kedouimg/004.png'} onClick={this.opendetails.bind(this,'/pages/persinfo/persinfo',item.userId)}></Image>
                            <Text className='qun-xinxi'>{item.nickName!='null'?item.nickName:'暂无'}</Text>
                        </View>
                        ))}

                    </View>
                    {this.state.hasNextPage ?
                      <View className='qun-gendo' onClick={this.getdata.bind(this,pageNumber + 1)}>点击查看更多</View>
                      :
                      ""
                    }
                </View>
               
                <View className='qun-modutwo'>
                  <View className='qun-gnln'>
                    <Text className='qun-gly'>管理员</Text>
                        {content.clusterUserAdminList?
                            <Text className='qun-glrs'>({content.clusterUserAdminList.length}人)</Text>
                            :
                            ""
                        }
                  </View>
                  <View className='qun-gnlnbo'>
                        {this.state.content.clusterUserAdminList.map((item, index) => ( 
                    <View className='qun-glrli'>
                      <Image className='qun-glravar' src={item.user.photo} onClick={this.opendetails.bind(this,'/pages/persinfo/persinfo',item.userId)}></Image>
                      <Text className='qun-glrname'>{item.user.nickName}</Text>
                    </View>
                        ))}
                  </View>
                </View>
                <View className='qun-mybill'>
                	<Image className='qun-mya' src='https://minichat.g2ma.com/kedouimg/huod1.png'></Image>
                	<Text className='qun-myb'>{list_date.regionFullName ? list_date.regionFullName : '暂无'}</Text>
                </View>
                <View className='qun-snqnyi'>
                  <View className='qun-snqntite'>商圈运营商</View>
                  <View className='qun-snqnzanwu' style={content1.length > 0 ? 'display:none;' : 'display:block;'}>{this.state.snqnzanwu}</View>
                  {content1.map((item, index) => (
                    <View className='qun-snqnul'><Text className='qun-snqnli'>{item.username}</Text></View>
                  ))}
                </View>
                <View className='qun-moduthreefour'>
                  <View className='qun-jnje'>
                      <Text className='qun-cy'>简介</Text>
                  </View>
                  <View className='qun-jnmosu'>{content.introduce?content.introduce:'暂无'}</View>
                </View>
                <View className='qun-moduthreefour'>
                  <View className='qun-jnje'>
                      <Text className='qun-cy'>公告</Text>
                  </View>
                  <View className='qun-jnmosu'>{content.note?content.note:'暂无'}</View>
                </View>
                <View className='btn' style={this.state.isadd==0?'':'display:none'} onClick={this.add.bind(this)}>加入</View>
                <View className='btn' style={this.state.isadd==1?'':'display:none'} onClick={this.tq.bind(this)}>退出</View>
            </View>
        </View>
        
      </View>
    )
  }
}

